<template>
  <div class="query-container">
    <div class="query">
    <div>比如ESD0000-0815-1</div>
      <div class="mt-4">
        <el-input
          v-model="input"
          style="max-width: 300px"
          placeholder="请输入委托单号"
          class="input-with-select"
        >
          <template #prepend>
            <el-button :icon="Search" />
          </template>
          <template #append>
            <el-button style="width: 60px; background-color: orange; color: #fff">查询</el-button>
          </template>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Search } from '@element-plus/icons-vue'
const input = ref('')
</script>

<style>
.query-container {
  width: 100%;
  height: 400px;
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
.query{
  text-align: center;
}
</style>
